<template>
	<el-container>
	    <el-aside width="60%">
			<el-tag  style="margin-left:8%">一级告警</el-tag>
			
			<div id="box"> 
			    
			<div id="con1" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter" @mouseleave="mLeave">
			<center>
			<p v-for='item in firstLevel' style="font-size: 20px;">时间：{{item.time}} 标签：{{item.name}}</p>
			</center>
			</div>
			</div>
		</el-aside>
	    <el-main>
			<el-tag type="success">二级告警</el-tag>
			<div id="box2">
			    
			<div id="con2" ref="con2" :class="{anim:animate2==true}" @mouseenter="mEnter2" @mouseleave="mLeave2">
			<center>
			<p v-for='item in secondLevel'>时间：{{item.time}} 标签：{{item.name}}</p>
			</center>
			</div>
			</div>
		</el-main>
	  </el-container>

</template>

<script>
export default {
 
data () {
return {
	animate:false,
	animate2:false,
	firstLevel:[ //消息列表对应的数组
	{time:"2021-05-05 18:43:22",name:"aaaaaaaaa"},
	{time:"2021-05-05 18:43:22",name:"bbbbbb"},
	{time:"2021-05-05 18:43:22",name:"cccccccc"},
	{time:"2021-05-05 18:43:22",name:"ddddddd"},
	{time:"2021-05-05 18:43:22",name:"eeeeeeeee"},
	{time:"2021-05-05 18:43:22",name:"ffffffff"},
	{time:"2021-05-05 18:43:22",name:"ggggggg"},
	{time:"2021-05-05 18:43:22",name:"hhhhh"},
	{time:"2021-05-05 18:43:22",name:"iiiiiii"},
	{time:"2021-05-05 18:43:22",name:"eeeeeeeee"},
	{time:"2021-05-05 18:43:22",name:"ffffffff"},
	{time:"2021-05-05 18:43:22",name:"ggggggg"},
	{time:"2021-05-05 18:43:22",name:"hhhhh"},
	{time:"2021-05-05 18:43:22",name:"iiiiiii"},
	{time:"2021-05-05 18:43:22",name:"ggggggg"},
	{time:"2021-05-05 18:43:22",name:"hhhhh"},
	{time:"2021-05-05 18:43:22",name:"iiiiiii"},
	{time:"2021-05-05 18:43:22",name:"eeeeeeeee"},
	{time:"2021-05-05 18:43:22",name:"ffffffff"},
	{time:"2021-05-05 18:43:22",name:"ggggggg"},
	{time:"2021-05-05 18:43:22",name:"hhhhh"},
	{time:"2021-05-05 18:43:22",name:"iiiiiii"},

],
secondLevel:[ //消息列表对应的数组
	{time:"2021-05-05 18:43:22",name:"111111"},
	{time:"2021-05-05 18:43:22",name:"22222222"},
	{time:"2021-05-05 18:43:22",name:"333333333"},
	{time:"2021-05-05 18:43:22",name:"444444"},
	{time:"2021-05-05 18:43:22",name:"555"},
	{time:"2021-05-05 18:43:22",name:"6666666"},
	{time:"2021-05-05 18:43:22",name:"7777777"},
	{time:"2021-05-05 18:43:22",name:"8888888"},
	{time:"2021-05-05 18:43:22",name:"99999999"},
	{time:"2021-05-05 18:43:22",name:"000000000"},
	{time:"2021-05-05 18:43:22",name:"11111111"},
	{time:"2021-05-05 18:43:22",name:"33333333444444"},
	{time:"2021-05-05 18:43:22",name:"555556666666"},
	{time:"2021-05-05 18:43:22",name:"889999999"},
	{time:"2021-05-05 18:43:22",name:"99999999"},
	{time:"2021-05-05 18:43:22",name:"000000000"},
	{time:"2021-05-05 18:43:22",name:"11111111"},
	{time:"2021-05-05 18:43:22",name:"33333333444444"},
	{time:"2021-05-05 18:43:22",name:"555556666666"},
	{time:"2021-05-05 18:43:22",name:"889999999"},

],
 
}
},

mounted () {

 
this.timer1= setInterval(this.scroll,1000)
this.timer2= setInterval(this.scroll2,1000)


 
},

methods: {
	scroll(){
			let con1 = this.$refs.con1;
			this.animate=!this.animate;
			var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
			setTimeout(function(){
			that.firstLevel.push(that.firstLevel[0]);
			that.firstLevel.shift();
			//con1.style.marginTop='0px';
			that.animate=!that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			},500)
	},
	mEnter () {
	 
		clearInterval(this.timer1)
	 
	},
	mLeave () {
	 
		this.timer1= setInterval(this.scroll,1000)
	 
	 
	},
	scroll2(){
			let con2 = this.$refs.con2;
			
			this.animate2=!this.animate2;
			var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
			setTimeout(function(){
			that.secondLevel.push(that.secondLevel[0]);
			that.secondLevel.shift();
			
			//con2.style.marginTop='0px';
			that.animate2=!that.animate2; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			},500)
	},
	mEnter2 () {
	 
		clearInterval(this.timer2)
	 
	},
	mLeave2 () {
	 
		this.timer2= setInterval(this.scroll2,1000)
	 
	 
	},


},

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
margin: 0 ;
padding: 0;
}
#box{
width: 80%;
height: 500px;
line-height: 30px;
overflow: hidden;
padding-left: 30px;
border: 1px solid #D3DCE6;
transition: all 0.5s;
margin-left:8%;
border-radius:5px; 
margin-top:20px;
}
.anim{
transition: all 0.5s;
}
#con1 li{
list-style: none;
line-height: 50px;
height: 50px;
}
#box2{
width: 80%;
height: 500px;
line-height: 30px;
overflow: hidden;
padding-left: 30px;
border: 1px solid #D3DCE6;
transition: all 0.5s;
border-radius:5px; 
margin-top:20px;
}

#con2 li{
list-style: none;
line-height: 30px;
height: 30px;
}

</style>